<!DOCTYPE html>
<html>
  <head>
    <title>imooc datav libs example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.0.0-beta.15/dist/vue.global.js"></script>
    <script src="../dist/kruup.datav.js"></script>
  </head>
  <body>
    <div id="app">
      {{message}}
      <test-component></test-component>
      <!-- loding  outsideColor 外圈颜色 insideColor内圈颜色   dur 旋转速度   颜色变换 速度*2-->
      <kruup-loding width='100px' height="100px" outsideColor="red" insideColor='blue' dur='1'>
        <div>数据大屏加载中</div>
      </kruup-loding>
      <!-- 流星容器 -->
      <fly-box style="width: 500px;height: 500px;" lineColor="blue" starColor="red" starLineth="70" dur="100" >
        <div>
           插槽
        </div>
      </fly-box>
      <kruup-logo stroke="red" stroke-width="50"></kruup-logo>
    </div>
    <script>
      Vue.createApp({
        setup() {
          var message = 'hello imooc!'
          return {
            message
          }
        }
      }).use(kruupDatav).mount('#app')
    </script>
  </body>
</html>